

<template>
    <tm-app class="phoneLogin" bgImg="white">
        <view style="height:var(--status-bar-height)"></view>
        <tm-navbar style="postion:relative;z-index:10;" :height="50" :margin="[0,0]" :padding="[0,0]" :fontSize="32" title="绑定新手机号" :transprent="true">
		</tm-navbar>
        <view class="content psr">
            <!-- <view class="title_main">手机号登录</view> -->
            <view class="inps">
                <view class="inp_box d-flex a-center" :class="{focus:inp1Focus}">
                    <view class="pre d-flex a-center j-center">
                        <view class="txt d-flex a-center j-center">+86</view>
                        <view style="height:40rpx;border-right:1px solid#ccc;"></view>
                    </view>
                    <input @focus="inp1Focus=true" @blur="inp1Blur" maxlength="11" type="number" class="inp"  v-model="phoneNum" placeholder="请输入11位手机号"/>
                </view>
                <view class="inp_box d-flex a-center" style="margin-top:20rpx;" :class="{focus:inp2Focus}">
                    <view class="pre d-flex a-center j-center">
                        <view class="txt d-flex a-center j-center">
                            <i class="tmicon tmicon-key" style="font-size:30rpx;"></i>
                        </view>
                        <view style="height:40rpx;border-right:1px solid#ccc;"></view>
                    </view>
                    <input @focus="inp2Focus=true" @blur="inp2Blur" maxlength="6" type="number" class="inp" style="width:280rpx;" v-model="vailCode" placeholder="请输入验证码"/>
                    <view v-show="showGetCode" class="btn d-flex a-center j-center" @tap="getCode">
                        <text class="text1">获取验证码</text>
                    </view>
                    <view v-show="!showGetCode" class="btn seconds d-flex a-center j-center">{{ seconds }}</view>
                </view>
                
            </view>

            <view class="btn_main d-flex a-center j-center" @tap="submit">更换手机号</view>

        </view>
    </tm-app>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { bindPhoneByCode,getVerCode } from "@/api/api";
import { userData as userDataStore }  from '@/store/userData'
import md5 from 'js-md5';


const userData:any = userDataStore();
const inp1Focus = ref(false);
const inp2Focus = ref(false);
const phoneNum = ref("");
const vailCode = ref(null);
const phoneError = ref(false);
const seconds = ref(60);
const showGetCode = ref(true);


const inp1Blur = ()=>{
    inp1Focus.value=false;
    const bool = uni.$tm.u.isPhone(phoneNum.value);
    phoneError.value = !bool;
}

const inp2Blur = ()=>{
    inp2Focus.value=false;
}

const getCode = async ()=>{
    seconds.value = 60;
    showGetCode.value = true;
    const bool = uni.$tm.u.isPhone(phoneNum.value);
    if(!bool){
        uni.showToast({
            icon: "none",
            title: '您输入的手机号有误，请检查',
            duration: 1500,
        });
        return
    }

    const res:any = await getVerCode({phone:phoneNum.value,messageType:'2'});
    const { flag } = res;
    if(flag===1){
        uni.showToast({
            icon: "none",
            title: '验证码已成功发送',
            duration: 1500,
        });
        showGetCode.value = false;
        let int = setInterval(()=>{

            if(seconds.value===1){
                showGetCode.value = true;
                clearInterval(int);
                return
            }

            seconds.value = seconds.value-1
        },1000)
    }
    
}
//绑定手机号
const submit = ()=>{
	console.log(vailCode.value)
    const params = {
        phone:phoneNum.value,
        id:userData.id,
        authCode:md5(vailCode.value)
    }
	bindPhoneByCode(params).then((res: any) =>{
		if(res.success){
			uni.showToast({
			    title: res.message,  
			    icon: 'success',  
			    duration: 1500,
				success: () => {
					uni.navigateBack({delta: 2});
				}
			});
		}else{
			uni.showToast({
			    title: res.message,  
			    icon: 'error',  
			    duration: 1500  
			});
		}
	});
}
</script>

<style lang="scss" scoped>
@import './changeNewPhone.scss';
</style>
